<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>车辆实时信息</title>
    <script type="text/javascript" src="../../jquery/jquery-3.2.1.min.js"></script>

    <link rel="stylesheet" href="../../myplugin/basis.css" type="text/css">
    <link rel="stylesheet" href="../../myplugin/footer/css/footer.css" type="text/css">
    <link rel="stylesheet" href="../../myplugin/panelList/css/panelList.css" type="text/css">

    <script type="text/javascript" src="../../myplugin/utils/utils.js"></script>
    <script type="text/javascript" src="../../myplugin/footer/footer.js"></script>
    <script type="text/javascript" src="../../myplugin/panelList/panelList.js"></script>

    <style type="text/css">
        * {
            font-size:14px;
        }
        label{
            font-weight: bolder;
        }
        span{
            color: rgba(0, 0, 0, 0.56);
        }
        div{
            vertical-align:top;
        }
        .eye-catching{
            color: #0e8cd2;
            font-weight: bolder;
        }
        #carInfo1 > div{
            display: inline-block;
            min-height:50px;
            margin:0px 0px 10px 0px;
        }
        .carHead{
            width:48%;
            padding:3px;
        }
        .carHead >div{
            margin:5px 10px;
            display: inline-block;
            float:left;

        }
        .carHead .address{
            min-width:300px;
        }
        .carTail{
            width:49%;
        }
        .carTail >div{
            margin:5px 10px;
            display: inline-block;
            float:left;

        }
        .tankProgress{
            min-width:280px;
        }
        #carDetail > div {
            margin:5px 10px;
            display: inline-block;
            float:left;
        }
    </style>
    <script type="text/javascript">
        var footer = null;
        var panelList = null;
        $(function(){
            footer = new F_footer($('#footer'),{
                items:[
                    {text:1},
                    {text:2},
                    {text:3},
                    {text:4},
                    {text:5},
                    {text:6},
                    {text:7},
                    {text:8},
                    {text:9}
                ]
            });

            panelList = new F_panelList($('#panelList'),{
                items:[
                    {idField:'car1',content:$('#carInfo1'),detail:$('#carDetail')}
                ]
            });
        });
    </script>
</head>
<body>

        <div style="float: left;width:100%;">
            <input class="f_input-text" type="text" placeholder="请输入车牌号查询" />
            <button type="button" class="f_button-default">搜索</button>

            <!-- footer -->
            <ul id="footer" style="float: right;">
            </ul>
        </div>


        <!-- panelList -->
        <ul id="panelList" style="float:left;">

        </ul>

        <div id="carInfo1">
            <div class="carHead">
                <div style="display: block;float:none;">
                    <span class="eye-catching">冀RV730</span>
                </div>
                <div>
                    <label>司机:</label>
                    <span>玉小刚</span>
                </div>
                <div>
                    <label>总里程:</label>
                    <span>78051.1</span>
                </div>
                <div>
                    <label>总油耗:</label>
                    <span>25714</span>
                </div>
                <div class="address">
                    <label>地理位置:</label>
                    <span>天津市/天津市/西青区</span>
                </div>
                <div style="width:100%;display: block;float: left;">
                    <span style="color: red;font-weight: bolder;">停止</span>
                </div>
            </div>
            <div class="carTail">
                <div style="display:block;float: none;">
                    <span class="eye-catching">冀RV730挂</span>
                    <p>视联智能测试车载1号罐</p>
                </div>
                <p class="tankProgress easyui-progressbar" data-options="value:70"></p>
                <div>
                    <label>剩余容积:</label>
                    <span>0.123123</span>
                </div>
                <div>
                    <label>剩余气量:</label>
                    <span>0.123123</span>
                </div>
                <div>
                    <label>储罐压力:</label>
                    <span>3.123123</span>
                </div>
            </div>
        </div>
    <div id="carDetail">
        <div>
            <label>发动机转速:</label>
            <span>580</span>
        </div>
        <div>
            <label>车速:</label>
            <span>2.66</span>
        </div>
        <div>
            <label>水温:</label>
            <span>80</span>
        </div>
        <div>
            <label>瞬时油耗:</label>
            <span>4.5</span>
        </div>
        <div>
            <label>扭矩:</label>
            <span>16</span>
        </div>
        <div>
            <label>经度:</label>
            <span>116.98433</span>
        </div>
        <div>
            <label>纬度:</label>
            <span>39.16876</span>
        </div>
        <div>
            <label>GPS速度:</label>
            <span>0</span>
        </div>
        <div>
            <label>方向:</label>
            <span>84</span>
        </div>
        <div>
            <label>海拔:</label>
            <span>-9</span>
        </div>
        <div>
            <label>油门:</label>
            <span>5.6</span>
        </div>
        <div>
            <label>档位:</label>
            <span>1</span>
        </div>
        <div>
            <label>GPS标记:</label>
            <span>41</span>
        </div>
        <div>
            <label>can数据标记:</label>
            <span>41</span>
        </div>
        <div>
            <label>剩余油量:</label>
            <span>0</span>
        </div>
        <div>
            <label>发动机工作时间:</label>
            <span>2071.69</span>
        </div>
    </div>
</body>
</html>